<template>
  <div class="all-box">
    <!-- 3个一循环这个div(未定义class) -->
    <div>
      <div class="top-box"></div>
      <div class="hol-box">
        <div class="tit-div">
          <span class="tit-sp">{{ title }}</span>
        </div>

        <!-- 每条的div -->
        <div class="one-box">
          <div class="cont-box">
            <div class="cont-left">
              <div class="cont-left-top">
                <span class="vac-name">
                  {{ vacName }}
                  <font class="vac-num">{{ vacNum }}</font>
                </span>
                <span></span>
              </div>
              <div class="cont-left-bom">
                <span class="vac-sum">{{ vacSum }}</span>
              </div>
            </div>

            <!-- 抽屉按钮 -->
            <div class="vac-but">
              <el-button plain @click="drawer = true"><span class="but-group">{{ msg }}</span></el-button>
              <el-drawer :visible.sync="drawer" :direction="direction">
                <el-button v-on:click="say('已接种')">
                  <div class="vic-div">未接种</div>
                </el-button>
                <br />
                <el-button v-on:click="say('未接种')">
                  <div class="vic-div">已接种</div>
                </el-button>
              </el-drawer>
            </div>
          </div>
          <div class="vac-line"></div>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "2019/0701   1月龄",
      vacName: "卡介苗",
      vacSum: "预防结合病",
      vacNum: "第一次",
      msg: "未接种",
      drawer: false,
      direction: "btt"
    };
  },
  methods: {
    say: function(message) {
      let that = this;
      that.msg = message;
    }
  }
};
</script>

<style>
.but-group{
    color: #722ED1;
}
.el-button {
    border: 1px solid #722ED1;
}

.vic-div {
  font-size: 20px;
  color: #3d7eff;
  width: 300px;
  height: 50px;
  line-height: 50px;
}

.vac-line {
  margin-top: 1px;
  width: 100%;
  height: 1px;
  background-color: #f2f2f2;
}
.vac-name {
  font-size: 16px;
  float: left;
}
.vac-sum {
  font-size: 14px;
  float: left;
}
.vac-num {
  font-size: 14px;
  margin-left: 7px;
  color: gray;
}
.cont-left-top {
  width: 100%;
  height: 50%;
}
.cont-left-bom {
  width: 100%;
  height: 50%;
}
.cont-left {
  width: 70%;
  height: 100%;
  float: left;
}
.cont-box {
  width: 100%;
  height: 90%;
}
.tit-div {
  width: 100%;
  height: 30px;
}
.tit-sp {
  float: left;
  font-size: 14px;
  color: #a599a5;
}
.vac-but {
  width: 30%;
  height: 100%;
  float: right;
}
.top-box {
  width: 100%;
  height: 15px;
  background-color: #F2F2F2;
}

.one-box {
  margin: 0 auto;
  width: 100%;
  height: 80px;
  margin-top: 7px;
}
.hol-box {
  margin: 0 auto;
  width: 90%;
  height: 300px;
}
.all-box {
  width: 100%;
  height: 100%;
}
</style>

